<div class="content__title">
    <h1>
        Dropdown Animations
        <small>Extends the dropdown effects when open just adding an animation class</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Basic</ng-template>
            <ng-template #body>
                <nz-dropdown class="mr-sm">
                    <a class="ant-dropdown-link" nz-dropdown>
                        Hover me <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li nz-menu-item>1st menu item</li>
                        <li nz-menu-item>2st menu item</li>
                        <li nz-menu-divider></li>
                        <li nz-menu-item [nzDisable]="true">3st menu item</li>
                        <li nz-menu-divider></li>
                        <li nz-submenu>
                            <span title>sub menu</span>
                            <ul>
                                <li nz-menu-item>1rd menu item</li>
                                <li nz-menu-item>2th menu item</li>
                            </ul>
                        </li>
                    </ul>
                </nz-dropdown>
                <nz-dropdown-button>
                    DropDown Button
                    <ul nz-menu>
                        <li nz-menu-item>1st menu item</li>
                        <li nz-menu-item>2st menu item</li>
                    </ul>
                </nz-dropdown-button>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="6" *ngFor="let name of ants">
        <div class="ant-box">
            <nz-dropdown [nzTrigger]="'click'">
                <a class="ant-dropdown-link" nz-dropdown>
                    {{name}} <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu class="animated {{name}}">
                    <li nz-menu-item>1st menu item</li>
                    <li nz-menu-item>2st menu item</li>
                </ul>
            </nz-dropdown>
        </div>
    </div>
</div>
